<template>
  <div>
    <h1>系统日志</h1>
    <div style="margin-bottom: 20px">
      <el-select
        v-model="value2"
        placeholder="系统日志"
        style="width: 120px; margin-left: 10px"
      >
        <el-option
          v-for="item in options"
          :key="item._id"
          :label="item.name"
          :value="item._id"
        />
      </el-select>

      <el-date-picker
        v-model="value1"
        type="datetimerange"
        start-placeholder="开始"
        range-separator="至"
        end-placeholder="结束"
        :default-time="defaultTime1"
        value-format="YYYY-MM-DD HH:mm:ss"
        style="width: 370px; margin-left: 15px"
      />

      <vxe-button
        style="margin-left: 10px; background-color: #5d4f96; color: white"
        @click="chaxun"
        >查询</vxe-button
      >
      <vxe-button style="margin-left: 10px" @click="chongzhi">重置</vxe-button>
      <vxe-button @click="exportEvent" style="margin-left: 10px"
        >导出</vxe-button
      >
      <vxe-button @click="printEvent">直接打印</vxe-button>
    </div>

    <vxe-table
      border
      class="mytable-style"
      show-footer
      ref="tableRef"
      :export-config="{}"
      :data="tableData"
      align="center"
      :header-cell-class-name="headerCellClassName"
      :row-class-name="rowClassName"
      :cell-class-name="cellClassName"
    >
      <vxe-column field="seq" type="seq"></vxe-column>
      <vxe-column field="rizhileiid.name" title="日志类型"></vxe-column>
      <vxe-column field="ip" title="IP"></vxe-column>
      <vxe-column field="username" title="用户账号"></vxe-column>
      <vxe-column field="tel" title="联系方式"></vxe-column>
      <vxe-column field="beizu" title="描述"></vxe-column>
      <vxe-column field="tai" title="状态" width="70"></vxe-column>
      <vxe-column field="time" title="创建时间" width="320">
        <template #default="{ row }">
          {{ formatTime(row.time) }}
        </template>
      </vxe-column>
    </vxe-table>
    <!-- 分页 -->
    <div style="float: right; margin-top: 30px">
      <el-pagination
        :current-page="currentPage4"
        :page-size="pageSize4"
        :page-sizes="[5, 6, 7, 8]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from "vue";
import axios from "axios";
import { ArrowDown } from "@element-plus/icons-vue";

import { ComponentSize, ElMessage } from "element-plus";
let isPopupVisible = ref(false);
let isPopupVisible1 = ref(false);
let isPopupVisible2 = ref(false);
let isPopupVisible3 = ref(false);

let formatStatus = ({ cellValue }) => {
  return cellValue ? "启用" : "禁用";
};

let formatTime = (time) => {
  const now = new Date(time);
  // 获取年、月、日、小时、分钟、秒
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0"); // 月份是从0开始的
  const day = String(now.getDate()).padStart(2, "0");
  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");
  const seconds = String(now.getSeconds()).padStart(2, "0");

  // 拼接成所需的格式
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
// 添加
let input20 = ref("");
let value20 = ref("");
let value21 = ref("");
let value22 = ref("");
let text = ref("");
let danxuan20 = ref("");
let name = JSON.parse(sessionStorage.getItem("obj"))[0].username;
let baochun = async () => {
  let data = await axios.post("http://localhost:3000/jia", {
    house: input20.value,
    buildingsid: value20.value,
    floorid: value21.value,
    room_id: value22.value,
    tai: danxuan20.value,
    username: name,
    beizu: text.value,
    time: getCurrentTime(),
  });
  isPopupVisible.value = false;
  ElMessage({
    message: "添加成功",
    type: "success",
  });
  zhixing();
};

function getCurrentTime() {
  const now = new Date();

  // 获取年、月、日、小时、分钟、秒
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0"); // 月份是从0开始的
  const day = String(now.getDate()).padStart(2, "0");
  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");
  const seconds = String(now.getSeconds()).padStart(2, "0");

  // 拼接成所需的格式
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

const value = ref("");
const value1 = ref([]);
const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00'

const value2 = ref("");
const value3 = ref("");
const input = ref("");
const options = ref([]);

const tableRef = ref();
const tableData = ref([]);
onMounted(() => {
  zhixing();
});

// 分页
const currentPage4 = ref(1);
const pageSize4 = ref(5);
const size = ref<ComponentSize>("default");
const background = ref(true);
const disabled = ref(false);
let length = ref(null);
const handleSizeChange = (val: number) => {
  pageSize4.value = val;
  console.log(val, 111);
  currentPage4.value = 1;
  chaxun();
};
const handleCurrentChange = (val: number) => {
  currentPage4.value = val;
  console.log(val, 222);
  chaxun();
};
const printEvent = () => {
  const $table = tableRef.value;
  if ($table) {
    $table.print();
  }
};

let zhixing = async () => {
  let data = await axios.post("http://localhost:3000/shuju3", {
    page: currentPage4.value,
    limit: pageSize4.value,
  });
  length.value = data.data.data4.length;

  tableData.value = data.data.data;
  options.value = data.data.data2;
};

const exportEvent = () => {
  const $table = tableRef.value;
  if ($table) {
    $table.openExport();
  }
};

const headerCellClassName = ({ column }) => {
  return "col-blue";
};
let chaxun = async () => {
  // console.log(value.value, value1.value, value2.value, value3.value);
  let data = await axios.post("http://localhost:3000/chaxun4", {
    rizhileiid: value2.value,
    startDate: value1.value[0],
    endDate: value1.value[1],
    page: currentPage4.value,
    limit: pageSize4.value,
  });
  tableData.value = data.data.data;
  console.log(data.data.data);
};

let chongzhi = async () => {
  value.value = "";
  value1.value = [];
  value2.value = "";
  value3.value = "";
  input.value = "";
  let data = await axios.post("http://localhost:3000/shuju3", {
    page: currentPage4.value,
    limit: pageSize4.value,
  });
  console.log(data.data.data);

  tableData.value = data.data.data;
};
</script>
<style scoped>
::v-deep(.mytable-style.vxe-table .vxe-header--column.col-blue) {
  background-color: #dfdcea;
  color: #7c7878;
}
.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center; /* 水平垂直居中 */
}
.popup-content {
  background-color: white;
  border-radius: 5px; /* 圆角 */
  width: 600px; /* 宽度 */
  height: 350px; /* 高度 */
  /* 确保弹出层在视口中居中 */
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid #888;
  transform: translate(-50%, -50%);
  box-shadow: 5px 5px 5px #888;
}
</style>